@import "variables";
@import "reset";
@import "function";
@import "sub";
body{
  font-size:1.4rem;
}
.m-market-hd{
  background: #00B2C8;
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  .u-logo{
    color:#Fff;
    img {
      width:100px;
      margin: 10px;
      float: left;
    }
  }
  .u-searchbox{
    height: 50px;
    box-sizing: border-box;
    padding-top: 12px;
    padding-left: 20px;
    width: 220px;
    float: left;
    position: relative;
    input{
      line-height: 20px;
      float: left;
      padding: 2px 5px;
      font-size: 14px;
      color: #888;
      width: 100%;
      border-radius: 3px;
      border: 0px;
    }
    i {
      right: 5px;
      position: absolute;
      color: #999;
      top: 0px;
      height:30px;
      cursor: pointer
    }
  }
  .u-mui{
    .ath {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      margin: 0 10px 0;
      vertical-align: middle;
    }
    .rel{
      min-height:50px;
      .atha{
        color:#Fff;
        box-sizing: border-box;
        display: inline-block;
        height:50px;
      }
      .lay {
        background: #fff;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        overflow: hidden;
        display: none;
        box-shadow: 0px 1px 3px #ddd;
        top: 50px;
        right: 0px;
        position: absolute;
        width: 100px;
        a{
          display: block;
          height:36px;
          line-height: 36px;
          padding:0 10px;
          &:hover{
            background: #18c0d6;
            color: #fff;
          }
        }
      }
    }
  }

}



.market-main{
  display:flex;
  .m-side{
    display:table-cell;
    width:180px;
    background:#ecf1f5;
    .hds {
      height: 80px;
      font-size: 20px;
      padding-top: 20px;
      padding-left: 35px;
      line-height: 60px;
    }

    .u-nav {
      li {
        font-size: 14px;
        a {
          color: #888;
          padding:15px 10px;
          display: block;
          border-left: 3px solid #ecf1f5;
          &.active,&:hover {
            background: #fff;
            border-left: 3px solid #18c0d6;
          }
        }
        &.cat-nav{
          .f-border-t(#ddd);
          a{
            padding:10px 10px 10px 35px;
            &:hover{
              background:none;
              color:#00a3c1;
              border-left: 3px solid #ecf1f5;
            }

          }
        }
      }

    }
  }


  .m-prolist{
    padding-top:50px;
    width:100%;
    padding-bottom:40px;
    .u-hd{
      .f-border-b();
      padding:5px 0;
    }
    .u-pro{
      margin:20px 0;
      li{
        .f-border-b();
        padding:20px 0;
        height:140px;
        .u-img{
          .f-fl();
          width:100px;
          img{
            width:100px;
            height:100px;
          }
        }
        .u-info{
          padding-left:15px;
          .f-fl();
          padding-top:10px;
          width:200px;
          dt{
            font-weight: normal;
          }
          dd{
            p{
              color:#999;
            }
          }
        }
        .u-des{
          width:440px;
          margin-top:10px;
          .f-fl();
          color:@gray;
        }
        .u-more{
          .f-fr();
          color:@gray;
          p{
            margin-bottom:3px;
          }
          text-align: right;
        }
      }
    }
  }



  .m-index{
    padding-top:50px;
    width:100%;
    padding-bottom:40px;
    .u-hotimg{
      margin-bottom:30px;
      position: relative;
      overflow: hidden;
      .owl-nav{display: none}
      .owl-item{
        float: left;
      }
      .owl-dots{
        left:0px;
        right:0px;
        bottom:10px;
        text-align: center;
        position: absolute;
        .owl-dot{
          z-index: 3333;
          width:10px;
          height:10px;
          margin-right:5px;
          display: inline-block;
          background:#eee;
          &.active{
           background:@gray-light;
          }
        }
      }
    }
    .u-box{
      .u-hd{
        .f-border-b();
        padding-bottom:5px;
        span{}
        .u-more{
          .f-fr();
          color: @brand-info;
        }
      }
      .u-market{
        margin:20px 0;
        .six{
          width:750px;
        }
        .item{
          width:250px;
          height:100px;
          position: relative;
          .f-fl();
          padding-left:120px;
          margin-bottom:20px;
          h3{
            a{
              font-weight: normal;
              font-size:1.4rem;
              color:@gray-dark;
            }
            margin-bottom:5px;
          }
          .img{
            position: absolute;
            left:0px;
          }
          p{
            font-size:1.3rem;
            color:@gray-light;
          }
        }
        .u-msg{
          background:#ecf1f5;
          padding:15px;
          width:270px;
          height:220px;
          h3{
            font-size:1.6rem;
            font-weight: normal;
            margin-bottom:15px;
          }
          a{
            height:25px;
            line-height: 25px;
            font-size:1.4rem;
            color:@gray-light;
            em{
              margin-right:10px;
              width:3px;height:3px;
              display:inline-block;
              background:@gray-dark;
              border-radius: 50%;
              vertical-align: middle;
            }
            display: block;
            &:hover{
              color:@brand-info;
            }
          }
        }
      }

      .u-fourimg{
        margin-bottom:30px;
        a{
          display: inline-block;
          margin-right:74px;
          float: left;
          &:last-child{
            margin-right:0px;
            float: right;
          }
        }
      }

      .u-addmarket{
        .item{
          height:150px;
          padding-top:50px;
          padding-left:100px;
          width:33%;
          float: left;
          position: relative;
          .img{
            width:80px;
            height:80px;
            left:0px;
            top:30px;
            position: absolute;
          }
        }
      }


    }
  }

}



.m-mview{
  padding:40px;
  .u-pro{
    li{
      .f-border-b();
      padding:20px 0;
      height:140px;
      .u-img{
        .f-fl();
        width:100px;
        img{
          width:100px;
          height:100px;
        }
      }
      .u-info{
        padding-left:15px;
        .f-fl();
        padding-top:10px;
        width:200px;
        dt{
          font-weight: normal;
        }
        dd{
          p{
            color:#999;
          }
        }
      }
      .u-des{
        width:440px;
        margin-top:10px;
        .f-fl();
        color:@gray;
      }
      .u-more{
        .f-fr();
        color:@gray;
        p{
          margin-bottom:3px;
        }
        text-align: right;
      }
    }
  }
  .u-vtex{
    dl{
      margin:20px 0;
      dt{
        .f-border-b();
        font-weight: normal;
        padding:6px 0;
      }
      dd{
        margin-top:10px;
        line-height: 1.7;
        color:@gray-light;
      }
    }
  }
}



.market-footer{
  font-size:1.2rem;
  color:grey;
  text-align: center;
  line-height: 1.7;
  padding:30px 0;
  a{
    color:grey;
  }
  background:#f5f5f5;
}

//view页面新增样式

.clear:after {
  content:' ';
  display:table;
  clear: both;
}
.ea-nav-tabs{
  border-bottom: 1px solid #ddd;
  &>li{
    float: left;
    &:hover>a{
      border-bottom-color:#15C1D6 ;
      color: #15C1D6;
    }
    &.active>a{
      border-bottom-color:#15C1D6 ;
      color: #15C1D6;
    }
    &>a{
      display:inline-block;
      text-decoration:none;
      padding: 10px 20px;
      cursor: pointer;
      color:#333;
      border-bottom: 1px solid transparent
    }
  }
}
.ea-nav-tabs-content>.ea-nav-tabItem{
  display: none;
  &.active{
    display: block
  }
}

.ServiceExplain,.ea-APIport,.ea-stateCode,.ea-user-price,.ea-codeCase{
  padding: 20px;
  box-sizing: border-box;
}
//API端口
.ea-APIport,.ea-codeCase{
  /*父元素设置弹性布局*/
  display:flex;
  /*主轴方向*/
  /*column 列上下*/
  flex-direction:row;
  /*是否换行*/
  flex-wrap:wrap;
  /*在主轴对齐方式*/
  justify-content:flex-start;
  .tabs-container{
    width: 20%;
    .tabs-box {
      li{
        a:hover{
          color:#15c1d6;
        }
        &.active{
          a{
            color:#15c1d6;
            text-decoration:none;
          }
        }
        a{
          display: inline-block;
          padding: 10px 20px;
          color:#333;
        }
      }

    }
  }
  .tabs-content{
    border-left: 1px solid #eee;
    width: 80%;
    &>div{
      padding: 10px 20px;
      display:none;
      &.active{
        display: block;
      }
    }
  }
}
.ea-APIport{
  .ea-API-title{
    font-weight: 400;
  }
  .ea-API-describe{
    padding: 20px 0;
    p{
      height: 25px;
      line-height: 25px;
    }
  }
  .ea-paramsExplain,.ea-returnParamsExplain{
    p{
      height: 40px;
      line-height: 40px;
    }
  }
  .ea-API-warn{
    margin-top:20px;
    height: 25px;
    line-height: 25px;
  }
  .ea-apiWorks,.ea-abnormalWorks{
    pre{
      height: 300px;
      overflow: auto;
    }
  }
}
//状态码
.ea-stateCode{
  caption{
    padding: 20px 0;
    font-weight: bold;
  }
  .ea-th-W{
    width: 100px;
  }
  thead>tr>th:first-child{
    text-align: center;
  }
  tbody>tr>th{
    text-align: center;
  }
}
//价格
.ea-user-price{
  table tr>th{
    text-align: center;
    font-weight: bold;
  }
  table tr>td{
    text-align: center;
  }
}
.codeExample_box{
  .codeEx_selectAndBtn{
    /*父元素设置弹性布局*/
    display:flex;
    /*主轴方向*/
    /*column 列上下*/
    flex-direction:row;
    /*是否换行*/
    flex-wrap:wrap;
    /*在主轴对齐方式*/
    justify-content:space-between;
    .selectCode{
      width: 100px;
      height: 34px;
    }
  }
  .EXcode{
    padding: 20px 0;
    margin-top:20px;
    pre{
      height: 350px;
      overflow: auto;

    }
  }

}
//服务中心
.ea-serverCenter{
  .sc-top-tabs{
    li>p{
      font-weight: bold;
      padding: 10px 20px 10px 0;
    }
  }
  .sc-serverList{
    /*父元素设置弹性布局*/
    display:flex;
    /*主轴方向*/
    /*column 列上下*/
    flex-direction:row;
    /*是否换行*/
    flex-wrap:wrap;
    /*在主轴对齐方式*/
    justify-content:flex-start;
    .item-serve{
      margin-top:40px ;
      height: 100px;
      width: 300px;
      margin-left: (1024-300*3)/2px;
      border:1px solid #ddd;
      cursor: pointer;
      /*父元素设置弹性布局*/
      display:flex;
      /*主轴方向*/
      /*column 列上下*/
      flex-direction:row;
      /*是否换行*/
      flex-wrap:wrap;
      /*在主轴对齐方式*/
      justify-content:flex-start;
      .serveImg>img{
        width: 100px;
        height: 100px;
        padding: 25px;
      }
      .serveInfo{
        width: 198px;
        display: inline-block;
        padding-top: 19px;
        position: relative;
        &>p{
          height: 30px;
          line-height: 30px;
        }
        &>div{
          height: 30px;
          span{line-height: 30px}
          .serveExpire{
            color: #e4393c;
          }
          a{
            padding:2px 5px ;
            text-align: center;
            background-color: #e4393c;
            color:#fff;
            margin-left: 10px;
            border-radius:3px ;
            margin-top: 3px;
            display: none;
          }
          a.active{
            display: inline-block;

          }
        }
        .sceneServe_bias{
          position: absolute;
          right: -18px;
          top: 8px;
          width: 80px;
          border-bottom: 1px solid #ddd;
          color: #ddd;
          transform: rotate(45deg);
        }
        .sceneServe_name{
          position: absolute;
          top: 10px;
          right: 6px;
        }
      }
      .serveBazaar{
        width: 300px;
        text-align: center;
        padding-top: 31px;
        &>span{
          font-size: 1.4rem
        }
      }
    }
    &>div:first-child{
      margin-left: 0px;
    }
    &>div:nth-child(3n+1){
      margin-left: 0px;
    }

  }

}
//index首页添加团队服务的样式
.lf{
  float: left;
}
.rt{
  float: right;
}
.clear:after {
  content:' ';
  display:table;
  clear: both;
}
.teamIcon{
  display: inline-block;
  padding: 0px 10px;
}
.teamIcon.active{
  background-color: #19B7CB;
}
.teamIcon>span{
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("../imges/teamIcon.png") no-repeat center;
  background-size: cover;
  vertical-align: middle;
}
.ea-teamList {
  position: absolute;
  top: 50px;
  right: 95px;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px #ddd;
  border: 1px solid #eee;
  border-top: none;
  width: 410px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 100;
  display: none;
}
.ea-teamList.active{display: block}
.ea-teamList h4{
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  padding: 0px 20px;
  box-sizing: border-box;
}
.teamServeName{
  border-bottom: 1px solid #eaeaea;
}
.teamServeContent{
  border-bottom:1px solid #eaeaea;
  height: 110px;
  box-sizing: border-box;
  padding:10px 20px;
  .teamsServeImg{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-top: 5px;
  }
  .teamsServeImg-R{
    padding-left:20px ;
    p{
      color:#333;
      height: 39px;
      line-height: 39px;
      font-size: 18px
    }
    .teamServeBtns{
      height: 50px;
      line-height: 50px;
    }
  }

}
.switchTeam-box{
  .ea-TeamList-box{
    padding: 0px 20px;
    /*父元素设置弹性布局*/
    display:flex;
    /*主轴方向*/
    /*column 列上下*/
    flex-direction:row;
    /*是否换行*/
    flex-wrap:wrap;
    /*在主轴对齐方式*/
    justify-content:flex-start;
    .ea-Team-item{
      display: inline-block;
      width :50%;
      color :#333;
      font-size: 1rem;
      font-weight :normal;
      height :40px;
      line-height: 40px;
      img{
        width: 28px;
        height: 28px;
        border-radius: 50%;
        vertical-align: middle;
      }
      span.item-teamName{
        vertical-align :middle;
        font-size: 16px;
      }
    }
  }
}
.creatTeam{
  text-align: center;
}
.ea-btn{
  padding: 6px 15px;
  border: 1px solid #ddd;
  color: #333;
  border-radius: 5px;
}